@import url('https://fonts.googleapis.com/css2?family=Funnel+Sans:ital,wght@0,300..800;1,300..800&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body{
    margin: 0;
    font-family: 'Poppins';
}

li, ul{
    list-style: none;
}
main{
    display:grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    grid-template-rows: 1900px;
    
}
.panel .text{
    background: #eeeee7;
    color: #303032;
    padding: 20px 60px;
}
.panel{
    display: grid;
    grid-template-columns: 1fr;
}

/* welcome panel */
.panel.welcome{
    background: #323230;
    padding: 30px 60px;
    grid-auto-rows: 1fr;
}

.panel.welcome a{
    color:#a8a8a8;
    text-decoration: none;
    margin-right: 20px;
}
.panel.welcome p{
    color: #a8a8a8;
    max-width: 680px;
    line-height: 2em;
}
.panel.welcome h1{
    color: #a8a8a8;
    font-size: 3em;
}
.panel.welcome .repeat p{
    font-weight: bold;
    font-stretch: expanded;
    font-size: 1.5em;
}
.panel.welcome footer{
    align-self: end;
}

/* about panel*/
.panel.about{
    grid-template-rows: 3fr 1fr;
    overflow:hidden;
}
.panel.about img{
    min-width: 100%;
    min-height: 100%;
    max-height: 250px;

}

/* photography panel */
.panel.photos{
    grid-template-rows: 1fr 3fr;
    overflow: hidden;
}

.panel.photos img{
   min-width: 100%;
   min-height: 100%;
   max-height: 250px; 
}

@media screen and (max-width:1410px){
    main{
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1700px 450px 300px;

    }
    .panel.photos{
        grid-column: span 2;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
    }
    .panel.photos img{
        max-height: 1000px; 
     }
}

@media screen and (max-width:960px){
    main{
        grid-template-columns: 100%;
        grid-template-rows: 2200px 450px 500px;
    }
    .panel.about{
        grid-row: 2;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
    }
    .panel img{
        width:100%
    }
}

@media screen and (max-width:680px){
    main{
        grid-template-rows: 2900px 650px 750px;
    }
    .panel.about, .panel.photos{
        grid-template-columns: 1fr;
        grid-column: span 1;
        grid-template-rows: 1fr 1fr;
        border-bottom: 1px solid #dcdcd0
    }
    nav{
        border-bottom: 1px solid #dcdcd0;
        height: 50px;
    }
    .panel.about img{
        max-height: 200px;
        height: 700px;
    }
    .panel.photos img{
        max-height: 350px;
        height:1000px;
    }

}